<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>选择器 | Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/23.e9994ecc.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/26.9422829f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/29.dc9b14bd.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/30.645d0efa.js"><link rel="prefetch" href="/awesome-notebook/assets/js/31.164808cf.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/33.3031be3e.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>选择器</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#通配选择器" class="sidebar-link">通配选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#元素选择器" class="sidebar-link">元素选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#类选择器" class="sidebar-link">类选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#交集选择器" class="sidebar-link">交集选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#并集选择器" class="sidebar-link">并集选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#后代选择器" class="sidebar-link">后代选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#子代选择器" class="sidebar-link">子代选择器</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#兄弟选择器" class="sidebar-link">兄弟选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#id-选择器" class="sidebar-link">id 选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#组合选择器" class="sidebar-link">组合选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#属性选择器" class="sidebar-link">属性选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#动态伪类选择器" class="sidebar-link">动态伪类选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#结构伪类选择器" class="sidebar-link">结构伪类选择器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#ui-伪类选择器" class="sidebar-link">UI 伪类选择器</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#伪元素选择器" class="sidebar-link">伪元素选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#选择器总述" class="sidebar-link">选择器总述</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#选择器优先级-css-权重" class="sidebar-link">选择器优先级(css 权重)</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#层叠性" class="sidebar-link">层叠性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#继承性" class="sidebar-link">继承性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#优先级" class="sidebar-link">优先级</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#复合写法" class="sidebar-link">复合写法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#height-与-line-height" class="sidebar-link">height 与 line-height</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#长度单位" class="sidebar-link">长度单位</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#元素宽高的百分比问题" class="sidebar-link">元素宽高的百分比问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#真实案例-1" class="sidebar-link">真实案例 1</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#真实案例-2" class="sidebar-link">真实案例 2</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#显示模式" class="sidebar-link">显示模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#块级元素-block" class="sidebar-link">块级元素 block</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#行内元素-inline" class="sidebar-link">行内元素 inline</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#行内块元素-inline-block" class="sidebar-link">行内块元素 inline-block</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#display-属性" class="sidebar-link">display 属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#隐藏元素的方式" class="sidebar-link">隐藏元素的方式</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#盒子模型的组成" class="sidebar-link">盒子模型的组成</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#盒子内容区" class="sidebar-link">盒子内容区</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#内边距-padding" class="sidebar-link">内边距 padding</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#外边距-margin" class="sidebar-link">外边距 margin</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#边框" class="sidebar-link">边框</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#相对定位-reative" class="sidebar-link">相对定位 reative</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#绝对定位-absolute" class="sidebar-link">绝对定位 absolute</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#常见应用-将某个元素盖在另外一个元素身上" class="sidebar-link">常见应用：将某个元素盖在另外一个元素身上</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#固定定位-fixed" class="sidebar-link">固定定位 fixed</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#浮动特点" class="sidebar-link">浮动特点</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#浮动练习" class="sidebar-link">浮动练习</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#浮动影响" class="sidebar-link">浮动影响</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#解决影响-清除浮动" class="sidebar-link">解决影响：清除浮动</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#案例" class="sidebar-link">案例</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#使块级元素水平竖直居中" class="sidebar-link">使块级元素水平竖直居中</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#translate-方法" class="sidebar-link">translate()方法</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#自定义属性" class="sidebar-link">自定义属性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#css-函数-2" class="sidebar-link">css 函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#var-函数" class="sidebar-link">var()函数</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#calc-函数" class="sidebar-link">calc()函数</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#box-sizing" class="sidebar-link">box-sizing</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#resize" class="sidebar-link">resize</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#box-shadow" class="sidebar-link">box-shadow</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#opacity" class="sidebar-link">opacity</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#小案例-给图片加水印" class="sidebar-link">小案例：给图片加水印</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#背景属性-2" class="sidebar-link">背景属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#background-origin" class="sidebar-link">background-origin</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#background-clip" class="sidebar-link">background-clip</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#边框-2" class="sidebar-link">边框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#color-width-style" class="sidebar-link">color width style</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#border-radius" class="sidebar-link">border-radius</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#outline-边框外轮廓" class="sidebar-link">outline 边框外轮廓</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#text-shadow-文本阴影" class="sidebar-link">text-shadow 文本阴影</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#white-space" class="sidebar-link">white-space</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#text-overflow-文本溢出" class="sidebar-link">text-overflow 文本溢出</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#文本修饰-text-decoration" class="sidebar-link">文本修饰 text-decoration</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#文本描边" class="sidebar-link">文本描边</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#主轴方向" class="sidebar-link">主轴方向</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#设置主轴方向-flex-direction" class="sidebar-link">设置主轴方向 flex-direction</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#主轴换行方式-flex-wrap" class="sidebar-link">主轴换行方式 flex-wrap</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#主轴方向与换行方式的复合" class="sidebar-link">主轴方向与换行方式的复合</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#主轴对齐方式-justify-content" class="sidebar-link">主轴对齐方式 justify-content</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#侧轴对齐方式" class="sidebar-link">侧轴对齐方式</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-实现水平垂直居中" class="sidebar-link">flex 实现水平垂直居中</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#父元素开启-flex-且同时设置-justify-content-和-align-items" class="sidebar-link">父元素开启 flex 且同时设置 justify-content 和 align-items</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#父元素开启-flex-子元素设置-margin-为-auto" class="sidebar-link">父元素开启 flex 子元素设置 margin 为 auto</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-伸缩性" class="sidebar-link">flex 伸缩性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-basis-主轴基准长度" class="sidebar-link">flex-basis 主轴基准长度</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-grow-伸缩项目放大比例" class="sidebar-link">flex-grow 伸缩项目放大比例</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#查询媒体类型" class="sidebar-link">查询媒体类型</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#查询媒体特性" class="sidebar-link">查询媒体特性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#媒体运算符" class="sidebar-link">媒体运算符</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#常见阈值" class="sidebar-link">常见阈值</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#用法一-直接写" class="sidebar-link">用法一：直接写</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#用法二-链接外部-css-文件" class="sidebar-link">用法二：链接外部 css 文件</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-伸缩性-2" class="sidebar-link">flex 伸缩性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#flex-basis-主轴方向基准长度" class="sidebar-link">flex-basis 主轴方向基准长度</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#线性渐变" class="sidebar-link">线性渐变</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#径向渐变" class="sidebar-link">径向渐变</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#重复渐变" class="sidebar-link">重复渐变</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#位移" class="sidebar-link">位移</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#缩放" class="sidebar-link">缩放</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#旋转" class="sidebar-link">旋转</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#扭曲" class="sidebar-link">扭曲</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#多重变换" class="sidebar-link">多重变换</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#变换源点更改" class="sidebar-link">变换源点更改</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#设置景深、透视点位置" class="sidebar-link">设置景深、透视点位置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#透视点位置" class="sidebar-link">透视点位置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#三大变换" class="sidebar-link">三大变换</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#位移-2" class="sidebar-link">位移</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#旋转-2" class="sidebar-link">旋转</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#缩放-2" class="sidebar-link">缩放</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#多重变换-2" class="sidebar-link">多重变换</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#背部可见性-backface-visibility" class="sidebar-link">背部可见性 backface-visibility</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#基本属性" class="sidebar-link">基本属性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#复合属性" class="sidebar-link">复合属性</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#案例-2" class="sidebar-link">案例</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#关键帧及其定义" class="sidebar-link">关键帧及其定义</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#动画属性" class="sidebar-link">动画属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#小案例" class="sidebar-link">小案例</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#复合属性-animation" class="sidebar-link">复合属性 animation</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#动画与过渡的区别" class="sidebar-link">动画与过渡的区别</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/css/css%E5%AD%A6%E4%B9%A0.html#小案例-2" class="sidebar-link">小案例</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h1> <h2 id="通配选择器"><a href="#通配选择器" class="header-anchor">#</a> 通配选择器</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有元素*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="元素选择器"><a href="#元素选择器" class="header-anchor">#</a> 元素选择器</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有div元素*/</span>
<span class="token punctuation">}</span>
<span class="token selector">p</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有p标签*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="类选择器"><a href="#类选择器" class="header-anchor">#</a> 类选择器</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.test</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有class属性中含有test的元素*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="交集选择器"><a href="#交集选择器" class="header-anchor">#</a> 交集选择器</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">p.test</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有class属性中含有test的p标签*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="并集选择器"><a href="#并集选择器" class="header-anchor">#</a> 并集选择器</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div,
p</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择所有div和p标签*/</span>
<span class="token punctuation">}</span>

<span class="token selector">#pig,
.dog,
.duck</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择id为pig，或类名为dog，或类名为duck的标签*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="后代选择器"><a href="#后代选择器" class="header-anchor">#</a> 后代选择器</h3> <p>后代包含儿子、孙子等所有后代</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div p</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择div标签中的所有p标签*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.parent .children</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择类名为parent标签中，类名为children的标签*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.parent p.children</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择类名为parent标签中，类名为children的p标签*/</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div p</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有后代p元素*/</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--所有p元素均会被选中--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>无名氏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>张三二号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>李四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>王五<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>赵六<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="子代选择器"><a href="#子代选择器" class="header-anchor">#</a> 子代选择器</h3> <ul><li>子代仅包含儿子，又称为父亲的直接子元素</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div &gt; p</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择div标签中的儿子元素且为p标签*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.parent &gt; p</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择类名为parent的标签的儿子元素且为p标签*/</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div &gt; p</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有儿子p元素*/</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>无名氏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--不会被选中，因为该p标签是div的孙元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>张三二号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>李四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>王五<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>赵六<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--div的直接子元素--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="选择所有子代-包括所有后代"><a href="#选择所有子代-包括所有后代" class="header-anchor">#</a> 选择所有子代（包括所有后代）</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*方法一：使用通配符&quot;*&quot;   */</span>
<span class="token selector">parent *</span> <span class="token punctuation">{</span>
  <span class="token comment">/*css样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*方法一：使用省略号&quot;...&quot;   */</span>
<span class="token selector">parent &gt; ...</span> <span class="token punctuation">{</span>
  <span class="token comment">/*css样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="选择除了首个子元素外的其他子元素"><a href="#选择除了首个子元素外的其他子元素" class="header-anchor">#</a> 选择除了首个子元素外的其他子元素</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
	<span class="token selector">.parent :not(:first-child)</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span>red
    <span class="token punctuation">}</span>
	</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>第一个子元素<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>其他子元素1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>其他子元素2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>其他子元素3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="兄弟选择器"><a href="#兄弟选择器" class="header-anchor">#</a> 兄弟选择器</h2> <ul><li>兄弟选择器只会向后找</li> <li><code>+</code> 选择器匹配紧邻的兄弟元素</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div + p</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选择div后紧紧相邻的兄弟p标签*/</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--此处p并不会被选中，因为p标签不与div相邻--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>李四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>王五<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>~</code> 选择器匹配随后的所有兄弟元素</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">li ~ li</span> <span class="token punctuation">{</span>
      <span class="token comment">/*
        * 作用：选中li后面的所有兄弟li标签，即选择li标签，且其上一个兄弟节点也为li
        * 效果：选择一串li标签中除了第一个的所有其他li标签
        */</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--选中除了第一个li标签外的其余所有li标签--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>十一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>十二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>十三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>十四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="id-选择器"><a href="#id-选择器" class="header-anchor">#</a> id 选择器</h2> <ul><li>命名：字母、数字、下划线、短杠，非字母开头、不包含空格、区分大小写</li> <li>多个元素 id 属性值不能相同</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">#test</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择id属性为test的元素*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="组合选择器"><a href="#组合选择器" class="header-anchor">#</a> 组合选择器</h2> <h3 id="属性选择器"><a href="#属性选择器" class="header-anchor">#</a> 属性选择器</h3> <p>作用：选中属性值符合一定要求的元素。
语法：</p> <ol><li>[属性名] 选中具有某个属性的元素。</li> <li>[属性名=&quot;值&quot;] 选中包含某个属性，且属性值等于指定值的元素。</li> <li>[属性名^=&quot;值&quot;] 选中包含某个属性，且属性值以指定的值开头的元素。</li> <li>[属性名$=&quot;值&quot;] 选中包含某个属性，且属性值以指定的值结尾的元素。</li> <li>[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">[title]</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择包含属性title的元素*/</span>
<span class="token punctuation">}</span>
<span class="token selector">[title=&quot;pig&quot;]</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择属性title=pig的元素*/</span>
<span class="token punctuation">}</span>
<span class="token selector">[title^=&quot;p&quot;]</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择属性title的值以字母p开头的元素*/</span>
<span class="token punctuation">}</span>
<span class="token selector">[title$=&quot;p&quot;]</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择属性title的值以字母p结尾的元素*/</span>
<span class="token punctuation">}</span>
<span class="token selector">[title*=&quot;p&quot;]</span> <span class="token punctuation">{</span>
  <span class="token comment">/*选择属性title的值包含字母p的元素*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="动态伪类选择器"><a href="#动态伪类选择器" class="header-anchor">#</a> 动态伪类选择器</h3> <ul><li>用于选中特殊状态的元素</li> <li>激活状态：鼠标点击后且未松开鼠标左键</li> <li>对于一个 a 标签，link、visited、hover、active 四种伪类选择器的顺序不能写反，否则可能不会起作用。原因：对于一个元素的 css 样式，如果发生冲突，后定义的会生效；当一个 a 标签被点击的过程中，本身具有 link 状态，鼠标悬浮后处于 link+hover 的叠加状态，点击后处于 link+hover+active 的叠加状态，也就是 active 会最后生效，如果将 active 定义在 link 前面，那么点击后将会是 hover 效果</li> <li>link 和 visited 状态是 a 标签独有的状态，hover 和 active 是所有 html 标签共有的状态</li> <li>focus 伪类选择器只适用于需要输入的表单类元素</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">a:link</span> <span class="token punctuation">{</span>
  <span class="token comment">/*a标签未被选中时的样式*/</span>
<span class="token punctuation">}</span>
<span class="token selector">a:visited</span> <span class="token punctuation">{</span>
  <span class="token comment">/*a标签被点击后的样式*/</span>
<span class="token punctuation">}</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token comment">/*a标签被鼠标悬浮后的样式*/</span>
<span class="token punctuation">}</span>
<span class="token selector">a:active</span> <span class="token punctuation">{</span>
  <span class="token comment">/*a标签被激活后的样式*/</span>
<span class="token punctuation">}</span>
<span class="token selector">input:focus</span> <span class="token punctuation">{</span>
  <span class="token comment">/*input输入框获取焦点后的css样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="结构伪类选择器"><a href="#结构伪类选择器" class="header-anchor">#</a> 结构伪类选择器</h3> <ul><li><code>div:first-child</code>用于选择 div 的父亲的第一个子元素</li> <li><code>div:nth-child(n)</code>用于选择 div 的父亲的第 n 个子元素</li> <li></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div &gt; p</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签的所有子元素且为p标签的元素*/</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--
    谁也选不中
    张三是div的第一个子元素但不是p标签（符合:first-child但不符合&gt;p）
    李四是第一个p标签但不是div的第一个子元素（符合&gt;p但不符合:first-child）
  --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>李四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>王五<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>赵六<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div p:first-child</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有后代p元素，且p的父级元素无所谓，但p必须是其父亲的第一个儿子
      效果：将选中无名氏和张三，因为两者都是div标签的后代，且都是各自父亲的第一个子元素
      */</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div &gt; p:first-child</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有标签为p的直接子元素，如果其中有p标签是其父亲的第一个儿子，将会被选中（也就是说，div标签的第一个直接子元素必须为p标签，才会被选中；若div的第一个直接子元素不是p标签，div中有再多的p标签，该选择器也不会生效）*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div p:first-of-type</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有后代p元素，且p的父级元素无所谓，选中的p标签为其中的第一个
      效果：将选中无名氏和张三，因为因为两者都是div标签的后代，且都是各自父亲的后代所有p标签中的第一个p标签
      */</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div &gt; p:first-of-type</span> <span class="token punctuation">{</span>
      <span class="token comment">/*筛选div标签中的所有标签为p的直接子元素，并选中第一个
      效果：将选中无名氏，因为是div标签的直接子元素，且是父亲的后代所有p标签中的第一个p标签
      */</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div p:nth-child(3)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有后代p元素，且p的父级元素无所谓，但p必须是其父亲的第三个儿子
      */</span>
      <span class="token comment">/*没有元素会被选中，因为选中div下的所有p标签后，没有一个p标签是其父元素的第三个子元素*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div &gt; p:nth-child(3)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有标签为p的直接子元素，如果其中有p标签是其父亲的第三个儿子，将会被选中（也就是说，div标签的第三个直接子元素必须为p标签，才会被选中；若div的第三个直接子元素不是p标签，div中有再多的p标签，该选择器也不会生效）*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div &gt; p:nth-of-type(3)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*选中div标签中的所有后代p元素，且p的父级元素无所谓，但p必须是其父亲的第三个p标签
      */</span>
      <span class="token comment">/*效果：王五被选中，因为p标签是div的所有标签为p的子元素中的第3个*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div p:nth-of-type(3)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*效果尚未研究明白*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div:first-child</span> <span class="token punctuation">{</span>
      <span class="token comment">/*div的父级元素是谁无所谓，但选中的div必须是其父亲的第一个儿子*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div p:last-child</span> <span class="token punctuation">{</span>
      <span class="token comment">/*介绍略*/</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div p:last-of-type</span> <span class="token punctuation">{</span>
      <span class="token comment">/*介绍略*/</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!----&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>无名氏<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>张三二号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>李四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>王五<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>赵六<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="nth-child-n-和-nth-of-type-n-中-n-的值"><a href="#nth-child-n-和-nth-of-type-n-中-n-的值" class="header-anchor">#</a> nth-child(n)和 nth-of-type(n)中 n 的值</h4> <blockquote><ol><li>0 或 不写 ：什么都选不中 —— 几乎不用。</li> <li>n ：选中所有子元素 —— 几乎不用。</li> <li>1~正无穷的整数 ：选中对应序号的子元素。</li> <li>2n (an+b 型)或 even ：选中序号为偶数的子元素。</li> <li>2n+1 (an+b 型)或 odd ：选中序号为奇数的子元素。</li> <li>-n+3 (an+b 型，3-n 就不可以)：选中的是前 3 个</li></ol></blockquote> <ul><li>选中父元素的前三个元素:<code>.parent &gt; :nth-child(-n+3)</code></li> <li>选中父元素的最后三个元素:<code>.parent &gt; :nth-last-child(-n+3)</code></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">p:nth-child(2)</span> <span class="token punctuation">{</span>
    <span class="token comment">/*选择的元素为：p标签，且其是其父元素的第二个元素*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">body :nth-child(1)</span> <span class="token punctuation">{</span>
    <span class="token comment">/*选择body标签中的 所有是其父元素的第一个子元素的标签*/</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>这是body的第一个子元素，但不是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body标签的第一个元素，该元素将被选中（第二个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第二个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--该元素将被选中（第一个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第三个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第四个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第五个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span>注意:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--作为p标签的第一个元素，该元素将被选中（第二个选择器）--&gt;</span>
    这是body的第六个子元素，是p标签
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">body &gt; :nth-child(-n + 3)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
  <span class="token selector">body &gt; :nth-last-child(-n + 3)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>这是body的第一个子元素，但不是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的前三个元素之一，将会被选中（第一个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第二个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的前三个元素之一，将会被选中（第一个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第三个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的前三个元素之一，将会被选中（第一个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第四个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的后三个元素之一，将会被选中（第二个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是body的第五个子元素，是p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的后三个元素之一，将会被选中（第二个选择器）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">&gt;</span></span>注意:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">&gt;</span></span>
    这是body的第六个子元素，是p标签
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--作为body元素的后三个元素之一，将会被选中（第二个选择器）--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="其他结构伪类选择器"><a href="#其他结构伪类选择器" class="header-anchor">#</a> 其他结构伪类选择器</h4> <blockquote><p>:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。 2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第 n 个 。 3. :only-child 选择没有兄弟的元素（独生子女）。 4. :only-of-type 选择没有同类型兄弟的元素。 5. :root 根元素。 6. :empty 内容为空元素（空格也算内容） 7. not(选择器) 排除满足括号中条件的元素</p></blockquote> <h3 id="ui-伪类选择器"><a href="#ui-伪类选择器" class="header-anchor">#</a> UI 伪类选择器</h3> <ol><li>:checked 被选中的复选框或单选按钮。</li> <li>:enable 可用的表单元素（没有 disabled 属性）。</li> <li>:disabled 不可用的表单元素（有 disabled 属性）。</li></ol> <h2 id="伪元素选择器"><a href="#伪元素选择器" class="header-anchor">#</a> 伪元素选择器</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token comment">/*选中第一个字母*/</span>
    <span class="token selector">p::first-letter</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*选中第一行文字，受限于浏览器的宽度*/</span>
    <span class="token selector">p::first-line</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*当被鼠标选中时*/</span>
    <span class="token selector">p::selection</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*选中input元素中的提示文字*/</span>
    <span class="token selector">input::placeholder</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*选中p元素最开始的位置，随后创建一个子元素*/</span>
    <span class="token selector">p::before</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;$&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/*选中p元素最后的位置，随后创建一个子元素*/</span>
    <span class="token selector">p::after</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;.00&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>my english is not good<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入用户名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>199<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>299<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>399<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="选择器总述"><a href="#选择器总述" class="header-anchor">#</a> 选择器总述</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* ID选择器 */</span>
<span class="token selector">#test</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 类选择器 */</span>
<span class="token selector">.parent</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 伪类选择器 */</span>
<span class="token comment">/* 动态伪类  a:link{} a:visited{} a:hover{} a:active{} a:focus{} */</span>
<span class="token comment">/* 结构伪类  a:first-child{} a:last-child{} a:nth-child{} a:first-of-type{} a:nth-of-type{}*/</span>

<span class="token comment">/* 否定伪类 a:not(选择器){} */</span>
<span class="token comment">/* UI伪类 input:checked{} input:enable{} input:disabled{} */</span>
<span class="token comment">/* 目标伪类 input:target{} */</span>
<span class="token comment">/* 元素选择器 */</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>

<span class="token comment">/*伪元素选择器*/</span>
<span class="token comment">/* div::first-letter{} div */</span>
<span class="token comment">/* 通配选择器 */</span>
<span class="token selector">*</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="选择器优先级-css-权重"><a href="#选择器优先级-css-权重" class="header-anchor">#</a> 选择器优先级(css 权重)</h2> <p>简单描述：</p> <blockquote><p>行内样式 &gt; ID 选择器 &gt; 类选择器 &gt; 元素选择器 &gt; 通配选择器。
详细描述：</p></blockquote> <ol><li>计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)
a : ID 选择器的个数。
b : 类、伪类、属性选择器的个数。
c : 元素、伪元素选择器的个数。</li></ol> <table><thead><tr><th>选择器</th> <th>权重</th></tr></thead> <tbody><tr><td>ul&gt;li</td> <td>(0,0,2)</td></tr> <tr><td>div ul&gt;li p a span</td> <td>(0,0,6)</td></tr> <tr><td>.atguigu .slogan</td> <td>(1,1,0)</td></tr> <tr><td>.atguigu .slogan a</td> <td>(1,1,1)</td></tr> <tr><td>.atguigu .slogan a:hover</td> <td>(1,2,1)</td></tr></tbody></table> <ol start="2"><li>比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：</li></ol> <ul><li>(1,0,0) &gt; (0,2,2)</li> <li>(1,1,0) &gt; (1,0,3)</li> <li>(1,1,3) &gt; (1,1,2)</li></ul> <ol start="3"><li>特殊规则：
<blockquote><ul><li>行内样式权重大于所有选择器。</li> <li>!important 的权重，大于行内样式，大于所有选择器，权重最高</li></ul></blockquote></li></ol> <h1 id="css-三大特性"><a href="#css-三大特性" class="header-anchor">#</a> css 三大特性</h1> <h2 id="层叠性"><a href="#层叠性" class="header-anchor">#</a> 层叠性</h2> <p>样式发生冲突时，会根据一定规则进行样式层叠，会发生覆盖</p> <h2 id="继承性"><a href="#继承性" class="header-anchor">#</a> 继承性</h2> <p>概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：
text-?? ， font-?? ， line-?? 、 color .....</p> <h2 id="优先级"><a href="#优先级" class="header-anchor">#</a> 优先级</h2> <ul><li>!important &gt; 行内样式 &gt; ID 选择器 &gt; 类选择器 &gt; 元素选择器 &gt; * &gt; 继承的样式。</li> <li>需要计算权重。计算权重时需要注意：并集选择器的每一个部分是分开算的！</li></ul> <h1 id="字体"><a href="#字体" class="header-anchor">#</a> 字体</h1> <p>字体大小</p> <ul><li>chrome 浏览器最小字体大小 12px</li> <li>浏览器设置调整默认字体大小
字体族</li> <li>可使用中文或英文</li> <li>字体名中含有空格必须使用引号</li> <li>可设置多个字体，优先级从左到右，一般将最后一个设置为 sans-serif（非衬线）或 serif（衬线）作为保底的字体
字体风格</li> <li>用于控制字体是否为斜体</li> <li>normal：正常；italic：斜体（字体自带）；oblique：斜体（强制斜体）
字体粗细</li> <li>可使用关键词或数值</li> <li><code>关键词:</code>lighter（100~300）：细；normal（400~500） ： 正常； bold （&gt;600）：粗；bolder ：很粗 （多数字体不支持）</li> <li><code>数值：</code>100~1000 且无单位，数值越大，字体越粗</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">p</span> <span class="token punctuation">{</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
      <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;STCaiyun&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;微软雅黑&quot;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
      <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
      <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">p:nth-child(2)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*后两位必须是字体大小和字体样式*/</span>
      <span class="token property">font</span><span class="token punctuation">:</span> bold italic 200px <span class="token string">&quot;华文彩云&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>张三吃豆芽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="复合写法"><a href="#复合写法" class="header-anchor">#</a> 复合写法</h2> <p>属性名： font ，可以把上述字体样式合并成一个属性。
作用：将上述所有字体相关的属性复合在一起编写。
编写规则：</p> <ol><li>字体大小、字体族必须都写上。</li> <li>字体族必须是最后一位、字体大小必须是倒数第二位。</li> <li>各个属性间用空格隔开。
实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。</li></ol> <h1 id="文本"><a href="#文本" class="header-anchor">#</a> 文本</h1> <p><strong>颜色 color</strong></p> <div class="language- extra-class"><pre class="language-text"><code>
</code></pre></div><p><strong>文本对齐方式 text-align</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">h1</span> <span class="token punctuation">{</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">p.date</span> <span class="token punctuation">{</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">p.main</span> <span class="token punctuation">{</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> justify<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>CSS text-align 实例<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2015 年 3 月 14 号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>main<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>当我年轻的时候，我梦想改变这个世界；<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>文本修饰 text-decoration</strong></p> <ul><li>控制文本的各种装饰线
<blockquote><ul><li>装饰线类型:none：无装饰线；underline：下划线；overline：上划线；line-through：删除线</li> <li>装饰线样式：dotted:虚线；wave：波浪线</li></ul></blockquote></li></ul> <p>文本缩进</p> <ul><li><p>控制文本首字母缩进</p></li> <li><p>css 长度单位</p></li> <li><p>控制文本水平对齐方式</p></li> <li><p>left：左对齐；right：右对齐；center：居中</p></li></ul> <h2 id="height-与-line-height"><a href="#height-与-line-height" class="header-anchor">#</a> height 与 line-height</h2> <p>height 定义了一个盒子的高度
line-height：定义的是每一行的高度，即为输入的内容。
<strong>当 height 和 line-height 相等时，即盒子的高度和行高一样，内容居中</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">p</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>这是一段演示内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><img src="/project-img/css相关/line-height和height.png"> <p><strong>行高 line-height</strong>
用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">p</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
      <span class="token property">letter-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>
      <span class="token property">word-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span>
      <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
      <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">p:nth-child(2)</span> <span class="token punctuation">{</span>
      <span class="token comment">/*后两位必须是字体大小和字体样式*/</span>
      <span class="token property">font</span><span class="token punctuation">:</span> bold italic 200px <span class="token string">&quot;华文彩云&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>张三吃豆芽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="列表-ul-属性"><a href="#列表-ul-属性" class="header-anchor">#</a> 列表 ul 属性</h1> <p>列表符号：list-style-type</p> <ul><li>none：不显示；square：实心方块；disc：圆形；decimal：数字；lower/upper-roman：大小写罗马字母；lower/upper-alpha：大小写数字</li></ul> <p>列表符号位置：list-style-position</p> <ul><li>inside：在 li 标签的里面，outside：在 li 标签的外</li></ul> <p>自定义列表符号：list-style-image</p> <ul><li>url()用于链接图片</li></ul> <p>复合属性：list-style</p> <ul><li>无数量顺序要求</li></ul> <h1 id="背景属性"><a href="#背景属性" class="header-anchor">#</a> 背景属性</h1> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody></tbody></table> <p>background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color |设置元素的背景颜色。
background-image |把图像设置为背景。
background-position| 设置背景图像的起始位置。
background-repeat | 设置背景图像是否及如何重复。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*  
background-position:

属性值：
关键值：left top right bottom及其组合
百分比：x% y% ：第一个值是水平位置，第二个值是垂直
像素值：xpos ypos：第一个值是水平位置像素，第二个值是垂直位置像素

*/</span>
</code></pre></div><h1 id="鼠标样式"><a href="#鼠标样式" class="header-anchor">#</a> 鼠标样式</h1> <table><thead><tr><th>属性值</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>cursor</td> <td>设置鼠标光标样式</td> <td>pointer move text crosshair wait help</td></tr></tbody></table> <h1 id="表格属性"><a href="#表格属性" class="header-anchor">#</a> 表格属性</h1> <table><thead><tr><th>边框属性</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>border-width</td> <td>边框宽度</td> <td>CSS 中可用的长度值</td></tr> <tr><td>border-color</td> <td>边框颜色</td> <td>CSS 中可用的颜色值</td></tr> <tr><td>border-style</td> <td>边框风格</td> <td>none 默认值<br>solid 实线<br>dashed 虚线<br>dotted 点线<br>double 双实线<br></td></tr> <tr><td>border</td> <td>边框复合属性</td> <td>没有数量、顺序的要求</td></tr> <tr><td>table-layout（生效的前提：单元格边框不能合并。）</td> <td>设置列宽度</td> <td>auto ：自动，列宽根据内容计算（默认值）。<br>fixed ：固定列宽，平均分。</td></tr> <tr><td>border-spacing</td> <td>单元格间距</td> <td>CSS 中可用的长度值。</td></tr> <tr><td>border-collapse</td> <td>合并单元格边框</td> <td>collapse ：合并<br>separate ：不合并</td></tr> <tr><td>empty-cells</td> <td>隐藏没有内容的单元格</td> <td>show ：显示，默认<br>hide ：隐藏生效前提：单元格不能合并。</td></tr> <tr><td>caption-side</td> <td>设置表格标题位置</td> <td>top ：上面（默认值）<br>bottom ：在表格下面</td></tr></tbody></table> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">table</span> <span class="token punctuation">{</span>
      <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span>
      <span class="token property">table-layout</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
      <span class="token comment">/*控制相邻单元格间距*/</span>
      <span class="token property">border-spacing</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">th:nth-child(3)</span> <span class="token punctuation">{</span>
      <span class="token property">border-width</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>年龄<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>性别<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>政治面貌<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>20<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>群众<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="css-盒子模型"><a href="#css-盒子模型" class="header-anchor">#</a> css 盒子模型</h1> <h2 id="长度单位"><a href="#长度单位" class="header-anchor">#</a> 长度单位</h2> <h2 id="元素宽高的百分比问题"><a href="#元素宽高的百分比问题" class="header-anchor">#</a> 元素宽高的百分比问题</h2> <blockquote><p>元素的包含块：
未脱离文档流的元素，包含块即父元素
脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素</p></blockquote> <p><strong>问题描述</strong>：宽高在使用百分比值时，参照是其包含块。任何元素的初始高度为 0，如果某个元素的包含块高度为 0，那么对其设置 height:100%,也不会生效</p> <p><strong>产生原因</strong>：如果包含块（即父元素）的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto（这是计算值，是指渲染之后解释的值，并不是我们设置 height: auto 所指的值）。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：()</p> <div class="language-c extra-class"><pre class="language-c"><code><span class="token char">'auto'</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token operator">/</span><span class="token number">100</span> <span class="token operator">=</span> NaN
</code></pre></div><blockquote><p>上面的计算结果是 NaN,这就是父元素没有设置高度时，子元素高度百分比不生效的原因了。</p></blockquote> <p><strong>特殊情况</strong>：html 文档根元素<code>&lt;html&gt;</code>的包含块是整个视窗，其宽高默认为整个浏览器视口，所以设置<code>&lt;html&gt;</code>的宽高分别为 width:100%;height:100%总能够生效</p> <p><strong>解决方案：</strong></p> <ol><li>显式设置包含块的宽高，或者直接进行如下设置</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">html,
body</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>使用绝对定位
为什么使用绝对定位就可以了呢？因为会使元素具有“格式化高度”。那什么又是格式化高度？</li></ol> <blockquote><p><strong>格式化宽度/高度</strong>仅出现在“绝对定位模型”中，也就是出现在 position 属性值为 absolute 或 fixed 的元素中。当 left/top 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度/高度表现为“格式化宽度/高度”，其宽度/高度相对于最近的具有定位特性（position 属性值不是 static）的祖先元素计算。(<strong>简单说就是让子元素相对于父元素进行定位，而不是祖先元素)</strong></p></blockquote> <h3 id="真实案例-1"><a href="#真实案例-1" class="header-anchor">#</a> 真实案例 1</h3> <p>下面的案例展示了一个 body 标签的子元素 div 撑满 body 元素本身</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>黑色主题<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
      <span class="token selector">body</span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token selector">.box</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><a href="https://www.cnblogs.com/yugege/p/9264319.html" target="_blank" rel="noopener noreferrer">参考文献-深入理解 CSS 系列（二）：为什么 height:100%不生效？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="真实案例-2"><a href="#真实案例-2" class="header-anchor">#</a> 真实案例 2</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>使用绝对定位和百分比高度示例<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
      <span class="token selector">.container</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token comment">/* 父元素设置为相对定位 */</span>
      <span class="token punctuation">}</span>
      <span class="token selector">.child</span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token comment">/* 子元素设置为绝对定位 */</span>
        <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token comment">/* 设置子元素的高度为50% */</span>
        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><img src="/project-img/css相关/height百分比问题-真实案例2.png"> <h2 id="显示模式"><a href="#显示模式" class="header-anchor">#</a> 显示模式</h2> <ul><li>设置元素为行内元素或块级元素</li></ul> <h3 id="块级元素-block"><a href="#块级元素-block" class="header-anchor">#</a> 块级元素 block</h3> <ul><li>单独占一行，不与任何元素共用一行，从上到下排列</li> <li>默认宽度：撑满父元素</li> <li>默认高度：由内容撑开</li> <li>宽高可设置</li></ul> <blockquote><p>主体结构标签：<code>&lt;html&gt; 、 &lt;body&gt;</code>
排版标签： <code>&lt;h1&gt; ~ &lt;h6&gt; 、 &lt;hr&gt; 、 &lt;p&gt; 、 &lt;pre&gt; 、 &lt;div&gt;</code>
列表标签： <code>&lt;ul&gt; 、 &lt;ol&gt; 、 &lt;li&gt; 、 &lt;dl&gt; 、 &lt;dt&gt; 、 &lt;dd&gt;</code>
表格相关标签： <code>&lt;table&gt; 、 &lt;tbody&gt; 、 &lt;thead&gt; 、 &lt;tfoot&gt; 、 &lt;tr&gt; 、&lt;caption&gt;</code> &gt; <code>&lt;form&gt; 与 &lt;option&gt;</code></p></blockquote> <h3 id="行内元素-inline"><a href="#行内元素-inline" class="header-anchor">#</a> 行内元素 inline</h3> <ul><li>不独占一行</li> <li>一行中不能容纳下的行内元素，会在下一行继续从左到右排列</li> <li>默认宽度：由内容撑开。</li> <li>默认高度：由内容撑开。</li> <li>无法设置宽高。</li></ul> <blockquote><p>文本标签：
<code>&lt;br&gt; 、 &lt;em&gt; 、 &lt;strong&gt; 、 &lt;sup&gt; 、 &lt;sub&gt; 、 &lt;del&gt; 、 &lt;ins&gt;</code> &gt; <code>&lt;a&gt; 与 &lt;label&gt;</code></p></blockquote> <h3 id="行内块元素-inline-block"><a href="#行内块元素-inline-block" class="header-anchor">#</a> 行内块元素 inline-block</h3> <ul><li>不独占一行</li> <li>一行中不能容纳下的行内元素，会在下一行继续从左到右排列。</li> <li>默认宽度：由内容撑开。</li> <li>默认高度：由内容撑开。</li> <li>可设置宽高。</li></ul> <blockquote><p>图片： <code>&lt;img&gt;</code>
单元格： <code>&lt;td&gt; 、 &lt;th&gt;</code>
表单控件：<code>&lt;input&gt; 、 &lt;textarea&gt; 、 &lt;select&gt; 、 &lt;button&gt;</code>
框架标签： <code>&lt;iframe&gt;</code></p></blockquote> <h2 id="display-属性"><a href="#display-属性" class="header-anchor">#</a> display 属性</h2> <table><thead><tr><th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>none</td> <td>元素会被隐藏。</td></tr> <tr><td>block</td> <td>元素将作为块级元素显示。</td></tr> <tr><td>inline</td> <td>元素将作为内联元素显示。</td></tr> <tr><td>inline-block</td> <td>元素将作为行内块元素显示。</td></tr></tbody></table> <blockquote><p>由于块元素如<code>div</code>不能与其他元素共用一行，给<code>&lt;div&gt;</code>标签设置<code>inline-block</code>可将 div 塞进某一行内</p></blockquote> <h3 id="隐藏元素的方式"><a href="#隐藏元素的方式" class="header-anchor">#</a> 隐藏元素的方式</h3> <p>方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二： display 属性
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。</p> <h2 id="盒子模型的组成"><a href="#盒子模型的组成" class="header-anchor">#</a> 盒子模型的组成</h2> <p>CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。</p> <ol><li>margin（外边距）： 盒子与外界的距离。</li> <li>border（边框）： 盒子的边框。</li> <li>padding（内边距）： 紧贴内容的补白区域。</li> <li>content（内容）：元素中的文本或后代元素都是它的内容</li></ol> <h3 id="盒子内容区"><a href="#盒子内容区" class="header-anchor">#</a> 盒子内容区</h3> <table><thead><tr><th>css 属性</th> <th>功能</th> <th>属性值</th></tr></thead> <tbody><tr><td>width</td> <td>设置内容区域宽度</td> <td>长度</td></tr> <tr><td>max-width</td> <td>设置内容区域的最大宽度</td> <td>长度</td></tr> <tr><td>min-width</td> <td>设置内容区域的最小宽度</td> <td>长度</td></tr> <tr><td>height</td> <td>设置内容区域的高度</td> <td>长度</td></tr> <tr><td>max-height</td> <td>设置内容区域的最大高度</td> <td>长度</td></tr> <tr><td>min-height</td> <td>设置内容区域的最小高度</td> <td>长度</td></tr></tbody></table> <h3 id="内边距-padding"><a href="#内边距-padding" class="header-anchor">#</a> 内边距 padding</h3> <table><thead><tr><th>css 属性</th> <th>功能</th> <th>属性值</th></tr></thead> <tbody><tr><td>padding-top</td> <td>上内边距</td> <td>长度</td></tr> <tr><td>padding-right</td> <td>右内边距</td> <td>长度</td></tr> <tr><td>padding-bottom</td> <td>下内边距</td> <td>长度</td></tr> <tr><td>padding-left</td> <td>左内边距</td> <td>长度</td></tr> <tr><td>padding</td> <td>复合属性</td> <td>长度，可以设置 1 ~ 4 个值</td></tr></tbody></table> <h3 id="外边距-margin"><a href="#外边距-margin" class="header-anchor">#</a> 外边距 margin</h3> <table><thead><tr><th>css 属性</th> <th>功能</th> <th>属性值</th></tr></thead> <tbody><tr><td>margin-left</td> <td>左外边距</td> <td>长度</td></tr> <tr><td>margin-right</td> <td>右外边距</td> <td>长度</td></tr> <tr><td>margin-top</td> <td>上外边距</td> <td>长度</td></tr> <tr><td>margin-bottom</td> <td>下外边距</td> <td>长度</td></tr> <tr><td>margin</td> <td>复合属性，可以写 1~4 个值，规律同 padding （顺时针）</td> <td>长度</td></tr></tbody></table> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*顺时针*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*上下左右外边距均为20px*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token comment">/*上下外边距为1px、左右为2px*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 1px 2px<span class="token punctuation">;</span>
  <span class="token comment">/*上 ：1px   左右：2px    下：2px*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 1px 2px 3px<span class="token punctuation">;</span>
  <span class="token comment">/*上、右、下、左分别为1、2、3、4px*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 1px 2px 3px 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*设置元素离左边能多远就多远，此时元素将靠左排列*/</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token comment">/*同理*/</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  <span class="token comment">/*设置元素在其元素内水平居中,仅能设置块级元素*/</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*
  margin塌陷问题：
  第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

  解决方案：
  方案一： 给父元素设置不为 0 的 padding 。
  方案二： 给父元素设置宽度不为 0 的 border 。
  方案三：给父元素设置 css 样式 overflow:hidden
  
  */</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>margin 可以设置为负值</li> <li>子元素的 margin 参考父元素的内容区 content 进行计算</li> <li>块级元素、行内快元素三均可设置四个方向的 margin，但行内元素的上下 margin 设置不会生效</li> <li>margin 合并问题</li></ul> <h3 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h3> <h1 id="定位"><a href="#定位" class="header-anchor">#</a> 定位</h1> <ul><li>开启定位的元素层级比普通元素高，即默认开启定位的元素会盖在普通元素上，</li> <li>各种定位方式的层级是一样的，后定位的元素会盖在先定位的元素上</li> <li>可使用 left、right、top、bottom 调整元素的位置，left 和 right 不能同时设置（left 优先生效），top 和 bottom 不能同时设置（top 优先生效）</li> <li>可以与 float、margin 同用，但不建议</li></ul> <h2 id="相对定位-reative"><a href="#相对定位-reative" class="header-anchor">#</a> 相对定位 reative</h2> <ul><li><p>参考点：自身原来位置</p></li> <li><p>相对定位的元素不会脱离文档流，</p></li> <li><p>不影响兄弟父亲元素</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">*</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">/*box1会盖在box2上*/</span>
  <span class="token selector">.box1</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.box2</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="绝对定位-absolute"><a href="#绝对定位-absolute" class="header-anchor">#</a> 绝对定位 absolute</h2> <blockquote><p>元素的包含块：
未脱离文档流的元素，包含块即父元素
脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素</p></blockquote> <ul><li>参考点：自己的包含块</li> <li>会脱离文档流</li> <li>开启绝对定位的元素（行内、行块内、块级）会变为：定位元素，元素宽高由内容撑开、且可自由设置宽高</li></ul> <h3 id="常见应用-将某个元素盖在另外一个元素身上"><a href="#常见应用-将某个元素盖在另外一个元素身上" class="header-anchor">#</a> 常见应用：将某个元素盖在另外一个元素身上</h3> <ul><li>父元素开启相对定位时，对自身的影响最小</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.container</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.container div</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="固定定位-fixed"><a href="#固定定位-fixed" class="header-anchor">#</a> 固定定位 fixed</h2> <ul><li>参考点：整个浏览器视窗</li> <li>脱离文档流，对兄弟、父亲元素有影响</li> <li>开启绝对定位的元素（行内、行块内、块级）会变为：定位元素，元素宽高由内容撑开、且可自由设置宽高</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*该元素将会固定在浏览器右下角*/</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="浮动"><a href="#浮动" class="header-anchor">#</a> 浮动</h1> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">img</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
      <span class="token property">margin-right</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">div:nth-child(3)::first-letter</span> <span class="token punctuation">{</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../pic/cp命令.png<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试这是一段测试
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="浮动特点"><a href="#浮动特点" class="header-anchor">#</a> 浮动特点</h2> <ul><li>脱离文档流</li> <li>元素浮动后，默认宽与高都是被内容撑开，而且可以设置宽高</li> <li>与其他元素共用一行</li> <li>不会与外边距 margin 合并，也不会 margin 塌陷，能够完美设置四个方向的 margin 和 padding</li> <li>没有行内块的空白问题</li></ul> <h2 id="浮动练习"><a href="#浮动练习" class="header-anchor">#</a> 浮动练习</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div.container</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> grey<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.box</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.box1</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box box1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box box2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box box3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="浮动影响"><a href="#浮动影响" class="header-anchor">#</a> 浮动影响</h3> <p>对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟
无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素</p> <h3 id="解决影响-清除浮动"><a href="#解决影响-清除浮动" class="header-anchor">#</a> 解决影响：清除浮动</h3> <ul><li>父元素高度塌陷</li> <li>兄弟元素不浮动问题</li> <li>布局原则：同一个父元素内，要么全都浮动、要么都不浮动</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*解决父元素高度塌陷问题，但不能解决兄弟元素问题*/</span>
<span class="token selector">div</span><span class="token punctuation">{</span>
<span class="token comment">/*为父元素添加高度*/</span>
<span class="token property">height</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span>
<span class="token comment">/*将父元素也设置浮动*/</span>
<span class="token property">float</span><span class="token punctuation">:</span>left
<span class="token comment">/*设置overflow溢出隐藏*/</span>
<span class="token property">overflow</span><span class="token punctuation">:</span>hidden
<span class="token punctuation">}</span>
<span class="token comment">/*给浮动元素的最后面添加一个块级元素，并给该块级元素设置clear:both用于清除浮动*/</span>
<span class="token selector">.box4</span><span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span>both
<span class="token punctuation">}</span>
<span class="token comment">/*给浮动元素的父元素添加伪元素以清除浮动
只有父元素所有子元素都浮动或都不浮动时，下面的方法才生效*/</span>
<span class="token selector">div::after</span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="案例"><a href="#案例" class="header-anchor">#</a> 案例</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">*</span> <span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.leftfix</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.rightfix</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.clearfix::after</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
      <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.container</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.logo</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.banner1</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 540px<span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.banner2</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.logo,
    .banner1,
    .banner2</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.menu</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token comment">/* float: left; */</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.content</span> <span class="token punctuation">{</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.item1,
    .item2</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 368px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px black solid<span class="token punctuation">;</span>
      <span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.item3,
    .item4,
    .item5,
    .item6</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 178px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
      <span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.bottom</span> <span class="token punctuation">{</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.item7,
    .item8,
    .item9</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 198px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 128px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.item8</span> <span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 10px 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.footer</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-header clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>logo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banner1 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>banner1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banner2 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>banner2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>菜单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item1 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item2 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom clearfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item3 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item4 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item5 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item6 leftfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right rightfix<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目7<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>栏目9<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>页脚<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="常用情景"><a href="#常用情景" class="header-anchor">#</a> 常用情景</h1> <h2 id="使块级元素水平竖直居中"><a href="#使块级元素水平竖直居中" class="header-anchor">#</a> 使块级元素水平竖直居中</h2> <h3 id="translate-方法"><a href="#translate-方法" class="header-anchor">#</a> translate()方法</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.centered</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>centered<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>这里放入需要居中显示的内容或其他HTML标记<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="css-函数"><a href="#css-函数" class="header-anchor">#</a> css 函数</h1> <h2 id="自定义属性"><a href="#自定义属性" class="header-anchor">#</a> 自定义属性</h2> <ul><li>自定义属性的名称，必需以 -- 开头。</li> <li>自定义属性名大小写敏感</li> <li>选择器定义了自定义属性的可见作用域，因此要定义全局属性，通常将其放在根伪类<code>:root</code>下，这样就可以在 HTML 文档的任何地方访问到</li> <li>自定义属性具有继承性，当没有为一个给定元素定义自定义属性，其父元素的自定义属性值将会被使用（也就是说子元素能够访问到父元素的自定义属性）</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
该自定义变量的作用域为整个HTML文档
*/</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--main-bg-color</span><span class="token punctuation">:</span> coral<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div1</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*
自定义变量--main-color的作用域仅仅是div元素自身
&lt;div style=&quot;--main-color:blue&quot;&gt;&lt;/div&gt;
*/</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--展示自定义属性的继承性--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.two</span> <span class="token punctuation">{</span>
    <span class="token property">--test</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.three</span> <span class="token punctuation">{</span>
    <span class="token property">--test</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>one<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!--var(--test):非法值--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--var(--test):blue--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>three<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--var(--test):red     覆盖父元素--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>four<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--var(--test):blue    继承父元素--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="css-函数-2"><a href="#css-函数-2" class="header-anchor">#</a> css 函数</h2> <h3 id="var-函数"><a href="#var-函数" class="header-anchor">#</a> var()函数</h3> <blockquote><p>作用：用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用
var(custom-property-name, value)
参数
custom-property-name :自定义属性的名称
value:备用值，在属性不存在的时候使用</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--main-bg-color</span><span class="token punctuation">:</span> coral<span class="token punctuation">;</span>
  <span class="token property">--main-txt-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">--main-padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#div1</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-txt-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--main-padding<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="calc-函数"><a href="#calc-函数" class="header-anchor">#</a> calc()函数</h3> <blockquote><p>作用：用于动态进行计算
语法：calc(expression)</p></blockquote> <ul><li>calc()函数支持加减乘除运算，运算符分别为 &quot;+&quot;, &quot;-&quot;, &quot;*&quot;, &quot;/&quot;</li> <li>运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">input</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 1em<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#formbox</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% / 6<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="长度单位-2"><a href="#长度单位-2" class="header-anchor">#</a> 长度单位</h1> <table><thead><tr><th>长度</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>vw</td> <td>视窗宽度的</td> <td>10vw 就是视口宽度的 10%</td></tr> <tr><td>vh</td> <td>视窗高度</td> <td>10vh 就是视口高度的 10%</td></tr> <tr><td>vmax</td> <td>视口宽高中大的那个的百分之多少。（了解即可）</td> <td></td></tr> <tr><td>vmin</td> <td>视口宽高中小的那个的百分之多少。</td> <td></td></tr></tbody></table> <h1 id="盒子模型"><a href="#盒子模型" class="header-anchor">#</a> 盒子模型</h1> <h2 id="box-sizing"><a href="#box-sizing" class="header-anchor">#</a> box-sizing</h2> <h2 id="resize"><a href="#resize" class="header-anchor">#</a> resize</h2> <table><thead><tr><th>可选值</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>none</td> <td>不允许用户调整元素大小。 (默认)</td> <td></td></tr> <tr><td>both</td> <td>可以调节元素的宽度和高度。</td> <td></td></tr> <tr><td>horizontal</td> <td>可以调节元素的宽度 。</td> <td></td></tr> <tr><td>vertical</td> <td>可以调节元素的高度</td> <td></td></tr></tbody></table> <h2 id="box-shadow"><a href="#box-shadow" class="header-anchor">#</a> box-shadow</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*写两个值:水平（左右），垂直（上下）*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px<span class="token punctuation">;</span> <span class="token comment">/*只显示右下*/</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> -10px -10px<span class="token punctuation">;</span> <span class="token comment">/*只显示左上*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写三个值:水平，垂直，阴影颜色*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写三个值:水平，垂直，阴影模糊程度*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写四个值:水平，垂直，阴影模糊程度，颜色*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px 10px blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写五个值:水平，垂直，阴影模糊程度，外沿，颜色*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px 10px 10px blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写六个值:水平，垂直，阴影模糊程度，外沿，颜色，内阴影*/</span>
<span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 10px 10px 10px blue inset<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>语法值</p> <blockquote><p>box-shadow: h-shadow v-shadow blur spread color inset;</p></blockquote> <table><thead><tr><th>可选值</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>h-shadow</td> <td>水平阴影的位置，必须填写，可以为负值</td> <td></td></tr> <tr><td>v-shadow</td> <td>垂直阴影的位置，必须填写，可以为负值</td> <td></td></tr> <tr><td>blur</td> <td>可选，模糊距离</td> <td></td></tr> <tr><td>spread</td> <td>可选，阴影的外延值</td> <td></td></tr> <tr><td>color</td> <td>可选，阴影的颜色</td> <td></td></tr> <tr><td>inset</td> <td>可选，将外部阴影改为内部阴影</td> <td></td></tr></tbody></table> <h2 id="opacity"><a href="#opacity" class="header-anchor">#</a> opacity</h2> <blockquote><p>opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。</p></blockquote> <h3 id="小案例-给图片加水印"><a href="#小案例-给图片加水印" class="header-anchor">#</a> 小案例：给图片加水印</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>菜鸟教程(runoob.com)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.container</span> <span class="token punctuation">{</span>
      <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">h1</span> <span class="token punctuation">{</span>
      <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
      <span class="token property">opacity</span><span class="token punctuation">:</span> 0.3<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
      <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://code-thinking.cdn.bcebos.com/pics/%E7%AE%97%E6%B3%95%E9%80%9A%E5%85%B3%E6%95%B0%E7%BB%84.png<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>@张三吃豆芽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="背景属性-2"><a href="#背景属性-2" class="header-anchor">#</a> 背景属性</h2> <h3 id="background-origin"><a href="#background-origin" class="header-anchor">#</a> background-origin</h3> <table><thead><tr><th>可选值</th> <th>描述</th> <th>其他</th></tr></thead> <tbody><tr><td>padding-box ：</td> <td>从 padding 区域开始显示背景图像。—— 默认值</td> <td></td></tr> <tr><td>border-box ：</td> <td>从 border 区域开始显示背景图像。</td> <td></td></tr> <tr><td>content-box ：</td> <td>从 content 区域开始显示背景图像</td> <td></td></tr></tbody></table> <h3 id="background-clip"><a href="#background-clip" class="header-anchor">#</a> background-clip</h3> <h2 id="边框-2"><a href="#边框-2" class="header-anchor">#</a> 边框</h2> <h3 id="color-width-style"><a href="#color-width-style" class="header-anchor">#</a> color width style</h3> <ul><li>border-width 边框宽度</li> <li>border-color 边框颜色</li> <li>border-style 边框风格
none 默认值
solid 实线
dashed 虚线
dotted 点线
double 双实线</li> <li>border 边框复合属性 没有数量、顺序的要求</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
  统一设置四个边框的属性
  border-width:
  border-color:
  border-style:

  复合写法：没有顺序要求
  border:2px dashed black
*/</span>
<span class="token comment">/*
分别设置盒子四个边框的样式
宽度：
 border-left-width
 border-right-width
 border-top-width
 border-bottom-width
颜色：
 border-left-color
 border-right-color
 border-top-color
 border-bottom-color
样式：
 border-left-style
 border-right-style
 border-top-style
 border-bottom-style


 复合写法：没有顺序要求
 border-left：3px solid black
 border-right：3px solid red
 border-top：3px solid skyblue
 border-bottom：3px solid green
 */</span>
</code></pre></div><h3 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> border-radius</h3> <p>同时设置四个角的圆角</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>分别设置四个角的圆角：</p> <blockquote><p>一个值是正圆半径，两个值分别是椭圆的 x 半径、 y 半径。
border-top-left-radius:设置左上角圆角半径：
border-top-right-radius 设置右上角圆角半径：
border-bottom-right-radius：设置右下角圆角半径：
border-bottom-left-radius：设置左下角圆角半径：</p></blockquote> <p>分别设置四个角的圆角(综合写法)：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="outline-边框外轮廓"><a href="#outline-边框外轮廓" class="header-anchor">#</a> outline 边框外轮廓</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*复合写法
  outline:宽度 颜色 风格；
  outline:30px solid blue;
  */</span>
<span class="token punctuation">}</span>
</code></pre></div><table><thead><tr><th>属性</th> <th>描述</th> <th>可选值</th></tr></thead> <tbody><tr><td>outline-width</td> <td>外轮廓的宽度。</td> <td></td></tr> <tr><td>outline-color</td> <td>：外轮廓的颜色</td> <td>。</td></tr> <tr><td>outline-style</td> <td>：外轮廓的风格</td> <td>。none ： 无轮廓</td></tr></tbody></table> <p><br>dotted ： 点状轮廓<br>dashed ： 虚线轮廓<br>solid ： 实线轮廓<br>double ： 双线轮廓
outline-offset |设置外轮廓与边框的距离，正负值都可以设置</p> <h1 id="文本-2"><a href="#文本-2" class="header-anchor">#</a> 文本</h1> <h2 id="text-shadow-文本阴影"><a href="#text-shadow-文本阴影" class="header-anchor">#</a> text-shadow 文本阴影</h2> <p>语法</p> <blockquote><p>text-shadow: h-shadow v-shadow blur color</p> <table><thead><tr><th>css 属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>h-shadow</td> <td>必需写，水平阴影的位置。允许负值。</td></tr> <tr><td>v-shadow</td> <td>必需写，垂直阴影的位置。允许负值。</td></tr> <tr><td>blur</td> <td>可选，模糊的距离。</td></tr> <tr><td>color</td> <td>可选，阴影的颜色</td></tr></tbody></table></blockquote> <h2 id="white-space"><a href="#white-space" class="header-anchor">#</a> white-space</h2> <table><thead><tr><th></th> <th></th></tr></thead> <tbody><tr><td>normal</td> <td>文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）</td></tr> <tr><td>pre</td> <td>原样输出，与 pre 标签的效果相同。</td></tr> <tr><td>pre-wrap</td> <td>在 pre 效果的基础上，超出元素边界自动换行。</td></tr> <tr><td>pre-line</td> <td>在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格</td></tr></tbody></table> <p>会忽略。
nowrap| 强制不换行</p> <h2 id="text-overflow-文本溢出"><a href="#text-overflow-文本溢出" class="header-anchor">#</a> text-overflow 文本溢出</h2> <ul><li><p>生效条件：overflow 不是 visiable（通常是 hidden） 且 white-space：nowrap</p> <table><thead><tr><th>可选值</th> <th>描述</th> <th>效果</th></tr></thead> <tbody><tr><td>clip</td> <td>当内联内容溢出时，将溢出部分裁切掉。</td> <td>（默认值）</td></tr> <tr><td>ellipsis</td> <td>当内联内容溢出块容器时，将溢出部分替换为</td> <td>...</td></tr></tbody></table></li></ul> <h2 id="文本修饰-text-decoration"><a href="#文本修饰-text-decoration" class="header-anchor">#</a> 文本修饰 text-decoration</h2> <ul><li>升级为复合属性</li> <li>语法：<code>text-decoration: text-decoration-line || text-decoration-style || text-decoration- colo</code></li></ul> <p>子属性及其含义：</p> <table><thead><tr><th>子属性</th> <th>描述</th> <th>可选值</th></tr></thead> <tbody><tr><td>text-decoration-line</td> <td>设置文本装饰线的位置</td> <td>none ： 指定文字无装饰 （默认值）<br>underline ： 指定文字的装饰是下划线<br>overline ： 指定文字的装饰是上划线<br>line-through ： 指定文字的装饰是贯穿线<br></td></tr> <tr><td>text-decoration-style</td> <td>文本装饰线条的形状</td> <td>solid ： 实线 （默认）<br>double ： 双线<br>dotted ： 点状线条<br>dashed ： 虚线<br>wavy ： 波浪线<br></td></tr> <tr><td>text-decoration-color</td> <td>文本装饰线条的颜色</td> <td></td></tr></tbody></table> <h2 id="文本描边"><a href="#文本描边" class="header-anchor">#</a> 文本描边</h2> <ul><li>描边功能仅 webkit 内核浏览器支持。
<table><thead><tr><th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>-webkit-text-stroke-width</td> <td>设置文字描边的宽度，写长度值。</td></tr> <tr><td>-webkit-text-stroke-color</td> <td>设置文字描边的颜色，写颜色值。</td></tr> <tr><td>-webkit-text-stroke</td> <td>复合属性，设置文字描边宽度和颜色</td></tr></tbody></table></li></ul> <h1 id="伸缩盒模型"><a href="#伸缩盒模型" class="header-anchor">#</a> 伸缩盒模型</h1> <ul><li><p>传统布局：基于传统盒状模型，display 属性+position 属性+float 属性</p></li> <li><p>伸缩容器：开启了 flex 的元素就是伸缩容器，通常给元素设置<code>display:flex</code>或<code>display:inline-flex</code>，后者很少使用</p></li> <li><p>伸缩项目：伸缩容器内的所有子元素（仅包含子元素，不包括所有后代元素。所有伸缩项目都会变为块元素</p></li></ul> <h2 id="主轴方向"><a href="#主轴方向" class="header-anchor">#</a> 主轴方向</h2> <ul><li><p>主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边
是终点）。</p></li> <li><p>侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边
是终点）</p></li></ul> <h3 id="设置主轴方向-flex-direction"><a href="#设置主轴方向-flex-direction" class="header-anchor">#</a> 设置主轴方向 flex-direction</h3> <ul><li>改变主轴方向的同时，侧轴方向也会随之改变</li></ul> <blockquote><p>属性名：flex-direction
可选值：</p></blockquote> <ol><li>==row==:从左到右（默认）</li> <li>row-reverse:从右到左</li> <li>column:从上到下</li> <li>column-reverse:从下打上</li></ol> <h3 id="主轴换行方式-flex-wrap"><a href="#主轴换行方式-flex-wrap" class="header-anchor">#</a> 主轴换行方式 flex-wrap</h3> <blockquote><p>属性名：flex-wrap
可选值：</p></blockquote> <ol><li>nowrap:不换行（默认值）</li> <li>==wrap==:自动换行（设置伸缩项目宽度后，伸缩容器宽度不够自动换行排列）</li> <li>wrap-reverse:反向换行</li></ol> <h3 id="主轴方向与换行方式的复合"><a href="#主轴方向与换行方式的复合" class="header-anchor">#</a> 主轴方向与换行方式的复合</h3> <blockquote><p>属性名：flex-flow
描述：复合了 flex-direction 和 flex-wrap 属性，
使用举例:<code>flex-flow:row wrap</code></p></blockquote> <h3 id="主轴对齐方式-justify-content"><a href="#主轴对齐方式-justify-content" class="header-anchor">#</a> 主轴对齐方式 justify-content</h3> <blockquote><p>属性名：justify-content
可选值：</p></blockquote> <ol><li>flex-start ：主轴起点对齐。—— 默认值</li> <li>flex-end ：主轴终点对齐。</li> <li>==center== ：居中对齐</li> <li>==space-between== ：均匀分布，两端对齐（最常用）。</li> <li>space-around ：均匀分布，两端距离是中间距离的一半。</li> <li>space-evenly ：均匀分布，两端距离与中间距离一致</li></ol> <h3 id="侧轴对齐方式"><a href="#侧轴对齐方式" class="header-anchor">#</a> 侧轴对齐方式</h3> <h4 id="单行的情况"><a href="#单行的情况" class="header-anchor">#</a> 单行的情况</h4> <blockquote><p>属性名：align-items
可选值：</p></blockquote> <ol><li>flex-start ：侧轴的起点对齐。</li> <li>flex-end ：侧轴的终点对齐。</li> <li>center ：侧轴的中点对齐。</li> <li>baseline : 伸缩项目的第一行文字的基线对齐。</li> <li>stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）</li></ol> <h4 id="多行的情况"><a href="#多行的情况" class="header-anchor">#</a> 多行的情况</h4> <blockquote><p>属性名：align-content
可选值：</p></blockquote> <ol><li>flex-start ：侧轴的起点对齐。</li> <li>flex-end ：侧轴的终点对齐。</li> <li>center ：侧轴的中点对齐。</li> <li>space-between ：与侧轴两端对齐，中间平均分布。</li> <li>space-around ：伸缩项目间的距离相等，比距边缘大一倍。</li> <li>space-evenly : 在侧轴上完全平分。</li> <li>stretch ：占满整个侧轴。—— 默认值</li></ol> <h2 id="flex-实现水平垂直居中"><a href="#flex-实现水平垂直居中" class="header-anchor">#</a> flex 实现水平垂直居中</h2> <h3 id="父元素开启-flex-且同时设置-justify-content-和-align-items"><a href="#父元素开启-flex-且同时设置-justify-content-和-align-items" class="header-anchor">#</a> 父元素开启 flex 且同时设置 justify-content 和 align-items</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #888<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="父元素开启-flex-子元素设置-margin-为-auto"><a href="#父元素开启-flex-子元素设置-margin-为-auto" class="header-anchor">#</a> 父元素开启 flex 子元素设置 margin 为 auto</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.outer</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.inner</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="flex-伸缩性"><a href="#flex-伸缩性" class="header-anchor">#</a> flex 伸缩性</h2> <h3 id="flex-basis-主轴基准长度"><a href="#flex-basis-主轴基准长度" class="header-anchor">#</a> flex-basis 主轴基准长度</h3> <ul><li>会使元素的宽度或高度失效
<blockquote><p>主轴横向：宽度 width 失效
主轴纵向：高度 height 失效</p></blockquote></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">.container</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.item1</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.item2</span> <span class="token punctuation">{</span>
    <span class="token property">flex-basis</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item1 item2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>效果</li></ul> <h3 id="flex-grow-伸缩项目放大比例"><a href="#flex-grow-伸缩项目放大比例" class="header-anchor">#</a> flex-grow 伸缩项目放大比例</h3> <ul><li>若所有伸缩项目的 flex-grow 值都为 1，则：它们将等分剩余空间（如果有空间的话）。</li> <li>若三个伸缩项目的 flex-grow 值分别为：1、2、3，则：分别瓜分到：1/6 、1/2、3/6 的空间。</li></ul> <h1 id="响应式布局"><a href="#响应式布局" class="header-anchor">#</a> 响应式布局</h1> <ul><li>根据屏幕宽度进行网页响应</li> <li>与媒体查询紧密结合</li></ul> <h2 id="查询媒体类型"><a href="#查询媒体类型" class="header-anchor">#</a> 查询媒体类型</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*只有在打印机上或者打印预览时才生效*/</span>
<span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*检测电子屏幕，包括电脑屏幕、平板屏幕、手机屏幕*/</span>
<span class="token atrule"><span class="token rule">@media</span> screen</span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*检测所有设备*/</span>
<span class="token atrule"><span class="token rule">@media</span> all</span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="查询媒体特性"><a href="#查询媒体特性" class="header-anchor">#</a> 查询媒体特性</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*视口宽度等于800px时的样式*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*视口宽度小于800px时的样式*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*视口宽度大于800px时的样式*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*视口高度等于800px时的样式*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">height</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*屏幕宽度等于800px时的样式*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">device-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="媒体运算符"><a href="#媒体运算符" class="header-anchor">#</a> 媒体运算符</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*且运算：and*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span> <span class="token keyword">and</span><span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>1000px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*或运算：or、逗号*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token comment">/*否定运算：not*/</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">not</span> screen</span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="常见阈值"><a href="#常见阈值" class="header-anchor">#</a> 常见阈值</h2> <h3 id="用法一-直接写"><a href="#用法一-直接写" class="header-anchor">#</a> 用法一：直接写</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/*样式*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="用法二-链接外部-css-文件"><a href="#用法二-链接外部-css-文件" class="header-anchor">#</a> 用法二：链接外部 css 文件</h3> <ul><li>分别完善各个 css 文件</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>screen and (max-width:800px)<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./css/small.css<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>screen and (min-width:801px) and (max-width:1000px)<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./css/middle.css<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>screen and (min-width:1200px)<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./css/large.css<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
</code></pre></div><h2 id="flex-伸缩性-2"><a href="#flex-伸缩性-2" class="header-anchor">#</a> flex 伸缩性</h2> <h3 id="flex-basis-主轴方向基准长度"><a href="#flex-basis-主轴方向基准长度" class="header-anchor">#</a> flex-basis 主轴方向基准长度</h3> <ul><li>设置伸缩项目在主轴上的基准长度</li> <li>若主轴是横向的，width 属性失效；若主轴是纵向的，height 属性失效</li> <li>设置<code>flex-basis:auto</code>时，</li></ul> <h1 id="渐变"><a href="#渐变" class="header-anchor">#</a> 渐变</h1> <h2 id="线性渐变"><a href="#线性渐变" class="header-anchor">#</a> 线性渐变</h2> <h2 id="径向渐变"><a href="#径向渐变" class="header-anchor">#</a> 径向渐变</h2> <h2 id="重复渐变"><a href="#重复渐变" class="header-anchor">#</a> 重复渐变</h2> <h1 id="_2d-变换"><a href="#_2d-变换" class="header-anchor">#</a> 2D 变换</h1> <ul><li>需为元素添加 transform 属性</li></ul> <h2 id="位移"><a href="#位移" class="header-anchor">#</a> 位移</h2> <p>2D 位移改变元素位置，
语法：&gt; transform:translateX() translateY()</p> <table><thead><tr><th>值</th> <th>含义</th></tr></thead> <tbody><tr><td>translateX</td> <td>设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度</td></tr></tbody></table> <p>的百分比。
translateY |设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度
的百分比。
translate |一个值代表水平方向，两个值代表：水平和垂直方向。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token comment">/*负值向左或向上，正值向右或向下*/</span>
  <span class="token comment">/*百分比是基于自身的宽高进行位移*/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">/*链式编写：transform: translateX(50%) translateY(50%);*/</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
位移对行内元素无效。如 span
位移配合定位，可实现元素水平垂直居中</p></blockquote> <h2 id="缩放"><a href="#缩放" class="header-anchor">#</a> 缩放</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scaleX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span>

  <span class="token comment">/**/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scaleY</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="旋转"><a href="#旋转" class="header-anchor">#</a> 旋转</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*
  transform:rotate(30deg)
*、
  /**/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="扭曲"><a href="#扭曲" class="header-anchor">#</a> 扭曲</h2> <ul><li>使元素在二维平面内被拉扯</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 
  transform:skewX(30deg)
  
  */</span>

  <span class="token comment">/**/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="多重变换"><a href="#多重变换" class="header-anchor">#</a> 多重变换</h2> <h2 id="变换源点更改"><a href="#变换源点更改" class="header-anchor">#</a> 变换源点更改</h2> <ul><li>设置 transform-origin 属性</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span><span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scaleX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span>

  <span class="token comment">/**/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scaleY</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="_3d-变换"><a href="#_3d-变换" class="header-anchor">#</a> 3D 变换</h1> <ul><li>需给父元素开启 3D 空间，通过设置 transform-style 属性</li></ul> <h2 id="设置景深、透视点位置"><a href="#设置景深、透视点位置" class="header-anchor">#</a> 设置景深、透视点位置</h2> <p>指定观察者与 z=0 平面的位置</p> <ul><li>通过设置 perspective 属性</li></ul> <h2 id="透视点位置"><a href="#透视点位置" class="header-anchor">#</a> 透视点位置</h2> <ul><li>通过设置 perspective-origin</li></ul> <h2 id="三大变换"><a href="#三大变换" class="header-anchor">#</a> 三大变换</h2> <h3 id="位移-2"><a href="#位移-2" class="header-anchor">#</a> 位移</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*设置z轴位移
  transform:translateZ(z)
  */</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="旋转-2"><a href="#旋转-2" class="header-anchor">#</a> 旋转</h3> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*设置x轴和y轴旋转角度
  transform:rotateX(x)
  transform:totateY(y)
  一次设置x、y、z的旋转角度
  transform:totate3d(x,y,z,deg)
  */</span>
  <span class="token comment">/*x、y、z轴分别旋转30度*/</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="缩放-2"><a href="#缩放-2" class="header-anchor">#</a> 缩放</h3> <h3 id="多重变换-2"><a href="#多重变换-2" class="header-anchor">#</a> 多重变换</h3> <ul><li>语法：<code>transform: translateZ(100px) scaleZ(3) rotateY(40deg)</code></li> <li>需要加载发生 3D 变换的元素上</li></ul> <h3 id="背部可见性-backface-visibility"><a href="#背部可见性-backface-visibility" class="header-anchor">#</a> 背部可见性 backface-visibility</h3> <ul><li>匀速背面在面向用户时是否可见</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token comment">/*
  backface-visibility:visible（默认）  元素背面可见、允许显示正面的镜像
  */</span>
  <span class="token property">backface-visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token comment">/*元素背面不可见*/</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="过渡"><a href="#过渡" class="header-anchor">#</a> 过渡</h1> <h2 id="基本属性"><a href="#基本属性" class="header-anchor">#</a> 基本属性</h2> <table><thead><tr><th>css 属性</th> <th>描述</th> <th></th></tr></thead> <tbody><tr><td>transition-property</td> <td>指明过渡属性</td> <td></td></tr> <tr><td>transition-duration</td> <td>过渡的持续时间</td> <td></td></tr> <tr><td>transition-delay</td> <td>开始过渡的延迟时间</td> <td></td></tr> <tr><td>transition-timing-function</td> <td>过渡动画函数</td> <td>ease：默认值；linear：线性过渡；ease-in/ease-out/ease-in-out/；step-start step-end steps();cubic-bezie:贝塞尔曲线类型；</td></tr></tbody></table> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">transition-property</span><span class="token punctuation">:</span> height width background-color<span class="token punctuation">;</span>
  <span class="token comment">/*让所有能过毒的属性都过渡
    transition-property:all
  */</span>
  <span class="token comment">/*分别设置各个需要过渡的属性对应的过渡时间*/</span>
  <span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s 1s 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>css 属性中，值为数字或能转为数字的数字都支持过渡</li> <li>能过渡的属性：颜色、长度、百分比、z-index\opacity、2D 变换、3D 变换、阴影</li></ul> <h2 id="复合属性"><a href="#复合属性" class="header-anchor">#</a> 复合属性</h2> <ul><li>语法：<code>transition:持续时间、延迟时间、其他</code></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> 1s 1s linear all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="案例-2"><a href="#案例-2" class="header-anchor">#</a> 案例</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.container</span> <span class="token punctuation">{</span>
      <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 225px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.container *</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.mask</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
      <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
      <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 225px<span class="token punctuation">;</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">transition</span><span class="token punctuation">:</span> 1s linear<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.container:hover .mask</span> <span class="token punctuation">{</span>
      <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.container:hover img</span> <span class="token punctuation">{</span>
      <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.6<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>20deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">img</span> <span class="token punctuation">{</span>
      <span class="token property">transition</span><span class="token punctuation">:</span> 0.6s linear<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./notebook_final/pic/css学习/上海2.jpeg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h1> <h2 id="关键帧及其定义"><a href="#关键帧及其定义" class="header-anchor">#</a> 关键帧及其定义</h2> <p>关键帧是一段动画的若干帧中起到决定性作用的若干帧</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*写法一:简单写法*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> 动画名</span> <span class="token punctuation">{</span>
  <span class="token selector">from</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
    <span class="token comment">/*property2:value2*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">to</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">/*写法二：完整写法*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> 动画名</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">20%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">40%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">60%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">80%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token comment">/*property1:value1*/</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="动画属性"><a href="#动画属性" class="header-anchor">#</a> 动画属性</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 指定动画 */</span>
  <span class="token property">animation-name</span><span class="token punctuation">:</span> testKey<span class="token punctuation">;</span>
  <span class="token comment">/* 设置动画所需时间 */</span>
  <span class="token property">animation-duration</span><span class="token punctuation">:</span> 5s<span class="token punctuation">;</span>
  <span class="token comment">/* 设置动画延迟 */</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> 0.5s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="小案例"><a href="#小案例" class="header-anchor">#</a> 小案例</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.container</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 900px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px black solid<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.box</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 5px 0<span class="token punctuation">;</span>
      <span class="token property">animation-name</span><span class="token punctuation">:</span> slip<span class="token punctuation">;</span>
      <span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
      <span class="token property">animation-delay</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token atrule"><span class="token rule">@keyframes</span> slip</span> <span class="token punctuation">{</span>
      <span class="token selector">from</span> <span class="token punctuation">{</span>
      <span class="token punctuation">}</span>
      <span class="token selector">to</span> <span class="token punctuation">{</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>900px<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>animation-iteration-count，指定动画的播放次数</p> <blockquote><p>number:动画循环次数
infinite:无限循环</p></blockquote> <p>animation-direction ，指定动画方向，常用值如下：</p> <blockquote><p>normal ： 正常方向 (默认)
reverse ： 反方向运行
alternate ： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行</p></blockquote> <p>animation-fill-mode ，设置动画之外的状态(不发生动画的时候在哪里)</p> <blockquote><p>forwards ： 设置对象状态为动画结束时的状态
backwards ： 设置对象状态为动画开始时的状态</p></blockquote> <p>animation-play-state ，设置动画的播放状态，常用值如下：</p> <blockquote><p>running ： 运动 (默认)
paused ： 暂停</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/**/</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token comment">/**/</span>
<span class="token property">animation-iteration-count</span><span class="token punctuation">:</span>infinite
<span class="token comment">/**/</span>
<span class="token property">animation-direction</span><span class="token punctuation">:</span>alternate
<span class="token comment">/**/</span>
<span class="token property">animation-direction</span><span class="token punctuation">:</span>forwards
<span class="token comment">/*鼠标悬浮时。动画暂停*/</span>
<span class="token selector">.outer:hover</span> <span class="token punctuation">{</span>
  <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="复合属性-animation"><a href="#复合属性-animation" class="header-anchor">#</a> 复合属性 animation</h2> <ul><li>只设置一个时间表示持续时间 duration</li> <li>设置两个时间分别表示持续时间 duration 和延迟 delay</li> <li>其他属性没有数量、顺序要求</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> atguigu 3s 0.5s linear 2 alternate-reverse forwards<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="动画与过渡的区别"><a href="#动画与过渡的区别" class="header-anchor">#</a> 动画与过渡的区别</h2> <ul><li>动画无须触发条件</li> <li>动画从开始到结束任意时刻都可以使用关键帧进行设置</li></ul> <h3 id="小案例-2"><a href="#小案例-2" class="header-anchor">#</a> 小案例</h3> <ul><li>使用一张多帧图片创造 css 动画</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 130px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 130px<span class="token punctuation">;</span>
      <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;./notebook_final/pic/css学习/bike.png&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">animation</span><span class="token punctuation">:</span> bike 1s <span class="token function">steps</span><span class="token punctuation">(</span>31<span class="token punctuation">)</span> infinite<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token atrule"><span class="token rule">@keyframes</span> bike</span> <span class="token punctuation">{</span>
      <span class="token selector">from</span> <span class="token punctuation">{</span>
      <span class="token punctuation">}</span>
      <span class="token selector">to</span> <span class="token punctuation">{</span>
        <span class="token property">background-position</span><span class="token punctuation">:</span> 0px -4030px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/23.e9994ecc.js" defer></script>
  </body>
</html>
